<template>
  <div class="m-theFollowUp">
    <div class="m-searchPanel m-searchPanelA">
      <div class="layout-1"><span class="leftLine"></span>查询条件</div>
      <div class="layout-2">
        <el-form :model="searchForm" :inline="true">
          <el-row :gutter="30">
            <el-col :span="6">
              <el-form-item label="交易平台">
                <el-select v-model="searchForm.platform" placeholder="请选择" clearable>
                  <el-option label="GTS2" value="GTS2"></el-option>
                  <el-option label="MT4" value="MT4"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="类型">
                <el-select v-model="searchForm.action" placeholder="请选择" clearable>
                  <el-option label="登入" value="login"></el-option>
                  <el-option label="登出" value="logout"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="途径">
                <el-select v-model="searchForm.uiType" placeholder="请选择" clearable>
                  <el-option label="PC" value="pcui(1)"></el-option>
                  <el-option label="iOS" value="ios(2)"></el-option>
                  <el-option label="Android" value="android(3)"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6" class="searchBtns">
              <el-button type="primary" icon="el-icon-search" @click="search" :loading="dataListLoading">查询</el-button>
              <el-button type="primary" plain icon="el-icon-refresh" @click="reset">重置</el-button>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
    <div class="m-dataList" id="m-tableList">
      <el-table
        :data="dataList"
        style="width: 100%"
        :max-height="600"
        v-loading="dataListLoading"
        element-loading-text="loading..."
        ref="dataList"
      >
        <el-table-column
          prop="customerno"
          width="140"
          label="交易账号">
        </el-table-column>
        <el-table-column
          prop="platform"
          label="交易平台"
          width="80">
        </el-table-column>
        <el-table-column
          prop="action"
          label="类型"
          width="120">
          <template slot-scope="scope">
           {{scope.row.action | action}}
          </template>
        </el-table-column>
        <el-table-column
          prop="time"
          label="时间"
          :formatter="countTimeFormat"
          width="180">
        </el-table-column>
        <el-table-column
          prop="ui_type"
          label="途径"
          width="120">
          <template slot-scope="scope">
            {{scope.row.ui_type | ui_type}}
          </template>
        </el-table-column>
        <el-table-column
          prop="ip_accept"
          label="IP"
          min-width="120">
        </el-table-column>
      </el-table>
    </div>
    <div class="m-pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes=pagination.pageSizeList
        :current-page=pagination.pageNo
        :page-size=pagination.pageSize
        layout="total, sizes, prev, pager, next"
        :total=pagination.total>
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import * as RealaccountAPI from '@/Api/realaccount'
  import * as Utils from '@/utils'
  export default {
    name: 'TheAccountDetailsLogin',
    data () {
      return {
        searchForm: {
          platform:'',
          action:'',
          uiType:'',
        },
        pagination: Utils.commonPagination(),
        dataList: [],
        dataListLoading:false,
        ajaxSearchParams:{},
      }
    },
    filters:{
      action(str){
          if(str == 'login') {
            return '登入'
          } else if(str == 'logout') {
              return '登出'
          } else  {
              return str
          }
      },
      ui_type(str) {
        if(str == 'pcui(1)') {
          return 'PC'
        } else if(str == 'ios(2)') {
          return 'iOS'
        } else if(str == 'android(3)'){
          return 'Android'
        } else  {
          return str
        }
      }
    },
    props:['type'],
    computed: {
      queryId(){
        return this.$route.params.id.split('_')[1]
      }
    },
    methods: {
      reset(){
        this.searchForm = Object.assign({},this.copySearchForm);
      },
      handleSizeChange(size) {
        this.pagination.pageSize = size;
        if (this.pagination.pageNo == 1) {
          this.queryList();
        } else {
          this.pagination.pageNo = 1;
        }
      },
      handleCurrentChange(index) {
        this.pagination.pageNo = index;
        this.queryList();

      },
      search(){
        this.ajaxSearchParams = Utils.searchParamsFormat(this.searchForm);
        if (this.pagination.pageNo == 1) {
          this.queryList();
        } else {
          this.pagination.pageNo = 1;
        }
      },
      queryList(){
          this.dataListLoading = true;
        if (this.$refs.dataList) {
          this.$refs.dataList.bodyWrapper.scrollTop = 0;
        }
        RealaccountAPI.realaccountInfo2_7(Object.assign({
          queryId: this.queryId,
          pageSize: this.pagination.pageSize,
          pageNo: this.pagination.pageNo-1
        },this.ajaxSearchParams))
          .then(res => {
            this.dataListLoading = false;
            if (res.code != '0') {
              this.$notify.warning({
                title: '温馨提示',
                message: res.msg
              })
              return
            }
            this.dataList = res.data.content;
            this.pagination.total = res.data.totalElements;
          })
          .catch(error => {
            this.dataListLoading = false;
            console.log(error)
          })
      },
      countTimeFormat(row, column){
        return Utils.countDateTimeFormat(row[column.property])
      },
    },
    created(){
      this.copySearchForm = Object.assign({},this.searchForm);
      this.search()
    }
  }
</script>

<style scoped lang="scss">

</style>
